<template>
  <div class="reminder">
    <!-- <h3 class="title">{{title}}</h3>
      <p class="info">{{msg}}</p> -->
    <h3 class="title">入学类型：{{ title }}</h3>
    <p class="info">{{ msg }}</p>
    <div class="signup-notice" v-if="isShow">
      <p>
        <span>上传资料须知：</span
        >可点击查看原图，上传时请注意图片方向，保持正常观看，注意保证图片清晰完整，保存成功后图片会显示在页面中；上传失败请点击图片重新上传。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "notice",
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    msg: {
      type: String,
      default: "如果入学类型错误，请注销账号后重新注册报名"
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.reminder {
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
  padding: 30px 0;
  background: #fff;
  text-align: center;
  border-top: 4px solid #38ad64;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  .info {
    line-height: 45px;
    font-size: 28px;
    color: #269650;
    margin-top: 10px;
  }
  .title {
    margin-bottom: 5px;
    font-size: 32px;
    color: #222;
  }
  .signup-notice {
    margin: 20px 30px 0;
    width: 670px;
    height: 195px;
    line-height: 40px;
    padding: 20px;
    font-size: 28px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    color: #222;
    text-align: justify;
    span {
      color: #ff0000;
    }
  }
}
</style>
